<template>
  <view class="container">
    <view class="content">
      <h1>请选择身份</h1>
      <view class="box orange-box" @click="goToLoginPage('user')">
        <view class="left">
          <image class="circle-image white" src="@/static/images/startPage/custom.png"></image>
          <p style="font-size: 30px;">我是顾客  ></p>
        </view>
        <view class="right"></view>
      </view>

      <view class="box yellow-box" @click="goToLoginPage('rider')">
        <view class="left">
          <image class="circle-image white" src="@/static/images/startPage/rider.png"></image>
          <p style="color: white; font-size: 30px;">我是骑手  ></p>
        </view>
        <view class="right"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToLoginPage(userType) {
      // 根据用户类型导航到不同的页面
      if (userType === 'user') {
        this.$tab.navigateTo('/pages/user/login')
      } else if (userType === 'rider') {
        this.$tab.navigateTo('/pages/rider/login')
      }
    }
  }
}
</script>
 <style>
 .container {
   /* height: 100vh; */
   display: flex;
   flex-direction: column;
   /* align-items: center; */
   justify-content: flex-start;
   padding-top: 50px;
   padding-bottom: 50px;
 }
 
 h1 {
   margin-bottom: 20px;
   margin-left: -210px;
   font-weight:bold;
   font-size: 170%
 }
 
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   height: 50%;
 }
 
 .box {
   width: 90%;
   height: 140px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   border-radius: 10px;
   margin-bottom: 20px;
 }
 
 .orange-box {
   background-color: rgb(254, 203, 46);
 }
 
 .yellow-box {
   background-color: rgb(240, 96, 42);
 }
 
 .circle-image {
   width: 110px;
   height: 110px;
  /* border-radius: 50%;
   background-color: white; */
   margin-left: 10px;
 }
 
 .left {
   display: flex;
   align-items: center;
 }
 
 .right {
   flex: 1;
 }
 .left p{
	 font-weight:bold;
	 font-size: 160%;
	 margin-left: 20px;
 }
 </style>
